<template>
  <div id="app">
    <NavBar />
    <br>
    <br>
    <div class="dashboard-container">
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <div class="user-info">
            <el-avatar :size="100" :src="require('../assets/avatar.jpg')"/>
            <div class="user-details">
              <h3>{{ user.name }}</h3>
              <p>优质会员 | {{ user.phoneNumber }}</p>
              <el-button type="primary" icon="el-icon-edit" @click="goInformation">编辑</el-button>
              <el-button type="info" icon="el-icon-info" @click="fetchBanInfo">封禁信息</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <br>
    <br>
    <div class="function-container">
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px">
            <el-menu default-active="1" class="el-menu-vertical-demo">
              <router-link to="/personalCenter">
                <el-menu-item index="1">
                  我的账户
                </el-menu-item>
              </router-link>
              <router-link to="/personalOrder">
                <el-menu-item index="2">
                  我的订单
                </el-menu-item>
              </router-link>
              <router-link to="/personalService">
                <el-menu-item index="3">
                  售后服务
                </el-menu-item>
              </router-link>
            </el-menu>
          </el-aside>
          <el-main>
            <el-row :gutter="20" class="mt-10">
              <div class="business-info">
                <h2>业务信息</h2>
                <el-row>
                  <el-col :span="12">
                    <p>套餐ID: {{ businessInfo.packageId }}</p>
                    <p>账户余额: {{ businessInfo.balance.toFixed(2) }}</p>
                    <p>数据余额: {{ businessInfo.dataBalance.toFixed(2) }}</p>
                    <p>通话时间余额: {{ businessInfo.callTimeBalance }}</p>
                  </el-col>
                </el-row>
              </div>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios';

export default {
  data() {
    return {
      user: {
        name: '', 
        phoneNumber: ''
      },
      businessInfo: { // 存储业务信息
        packageId: null,
        balance: 0,
        dataBalance: 0,
        callTimeBalance: null
      },
      banInfo: []
    };
  },
  components: {
    NavBar
  },
  created() {
    this.checkUserToken();
    this.fetchBusinessInfo(); // 获取业务信息
  },
  methods: {
    goInformation() {
      this.$router.push({ path:'/information'});
    },
    checkUserToken() {
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.get('http://localhost:8081/users/info', {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
        .then(response => {
          this.user.name = response.data.userName;
          this.user.phoneNumber = response.data.phoneNumber;
          this.fetchBusinessInfo(); // 确保在获取用户信息后获取业务信息
        })
        .catch(error => {
          console.error("Error fetching user info:", error);
          this.$notify.error({
            title: '错误',
            message: '获取用户信息失败'
          });
        });
      }
    },
    fetchBusinessInfo() {
      const token = localStorage.getItem('userToken');
      axios.get('http://localhost:8081/bills/getBusinessInformationByPhoneNumber', {
        params: { phoneNumber: this.user.phoneNumber },
        headers: {
          'Authorization': 'Bearer ' + token
        }
      })
      .then(response => {
        this.businessInfo = response.data;
      })
      .catch(error => {
        console.error("Error fetching business info:", error);
        this.$notify.error({
          title: '错误',
          message: '获取业务信息失败'
        });
      });
    },
    fetchBanInfo() {
      const token = localStorage.getItem('userToken');
      axios.get('http://localhost:8081/users/getBanIfo', {
        params: { Phone_Number: this.user.phoneNumber },
        headers: {
          'Authorization': 'Bearer ' + token
        }
      })
      .then(response => {
        this.banInfo = response.data;
        this.showBanInfoDialog();
      })
      .catch(error => {
        console.error("Error fetching ban info:", error);
        this.$notify.error({
          title: '错误',
          message: '获取封禁信息失败'
        });
      });
    },
    showBanInfoDialog() {
      this.$alert('封禁信息：<br>' + this.banInfo.map(info => `${info.Ban_Time} -原因： ${info.Ban_Reason}`).join('<br>'), '封禁信息', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        type: 'info'
      });
    }
  }
}
</script>

<style>
  .dashboard-container {
    width: 70%;
    margin: 40px auto; /* 增加顶部边距 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .user-info {
    display: flex;
    align-items: center;
  }
  .user-details {
    margin-left: 20px;
  }
  .user-details h3 {
    margin: 0 0 10px;
  }
  .function-container {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .el-aside {
    color: #333;
  }
  .business-info {
    margin-top: 20px;
  }
  .business-info h2 {
    margin-bottom: 10px;
  }
  
</style>